<template>
  <div>
    <div class="container"
         style="display: flex; align-items: center; justify-content: space-between; margin-left: 30px; margin-bottom: 20px;">
      <div style="display: flex; align-items: center;">
        <span class="demonstration" style="font-weight: bold; margin-right: 10px;">统计日期</span>
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="margin-right: 10px;">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="refreshData"></el-button>
      </div>
      <span style="color: tomato; font-size: 20px; text-align: center; margin-right: 10px">{{
          userInfo.className
        }}</span>
    </div>
    <!-- 第二行 -->
    <el-row :gutter="10">
      <!-- 下方整宽卡片 -->
      <el-col :span="24">
        <el-card>
          <div style="width: 100%; height: 400px" id="line">
            <!-- 这是下方整宽卡片中的柱状图容器 -->
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin-top: 20px;"></div>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="bar">

          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="pie">

          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getBarAndPieOption, getClassLineOption} from '../request/api'

// 柱状图的选项
let barOption = {
  title: {
    text: '各评分段人数',
    subtext: '优秀（90-100分）良好（80-89分）中等（60-79分）较差（60分以下）',
    left: 'center', // 调整标题位置，居中对齐
    top: '0%', // 调整顶部间距，避免与图表重叠
    textStyle: {
      fontSize: 18, // 标题字体大小
      color: '#000' // 标题字体颜色
    },
    subtextStyle: {
      fontSize: 12, // 子标题字体大小
      color: '#666' // 子标题字体颜色
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '20%', // 为图表设置上方边距，避免与标题重叠
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['优秀', '良好', '中等', '较差']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [35, 25, 25, 15],
      color: '#3398DB'
    }
  ]
}

// 假设这是获取评分人数数据的方法。请根据实际情况修改。
function getFocusScoreCountsData () {
  // 这里可以替换为您从 API 或其他来源获取的数据
  // 例如：返回的数据可能是一个对象或数组，包含各个等级的评分人数
  // 例如：{ excellent: 35, good: 25, average: 25, poor: 15 }
  return {
    excellent: 35,
    good: 25,
    average: 25,
    poor: 15
  }
}

// 饼状图的选项
let pieOption = {
  title: {
    text: '近7天班级学生课堂专注度评分占比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '专注度评分',
      type: 'pie',
      radius: '75%',
      center: ['50%', '55%'],
      data: [], // 在这里放置处理好的数据
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

// 假设这是获取评分数据的方法。请根据实际情况修改。
function getFocusScoresData () {
  // 这里可以替换为您从 API 或其他来源获取的数据
  // 例如：返回的数据可能是一个对象或数组，包含各个等级的评分占比
  // 例如：{ excellent: 35, good: 25, average: 25, poor: 15 }
  return {
    excellent: 35,
    good: 25,
    average: 25,
    poor: 15
  }
}

const lineOption = {
  title: {
    text: '班级课堂专注度趋势变化图', // 标题内容
    left: 'center',
    top: 'top'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    name: '时间',
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    max: 100,
    min: 0
  },
  legend: {
    data: ['平均分', '优秀线', '良好线', '中等线'],
    left: '8%',
    orient: 'vertical'
  },
  grid: {
    top: '25%', // 调整上方的边距，向下移动折线图
    left: '10%', // 调整左边的边距
    right: '10%', // 调整右边的边距
    bottom: '10%' // 调整下方的边距
  },
  series: [
    {
      name: '平均分',
      data: [90, 82, 76, 86, 72, 69, 62],
      type: 'line',
      smooth: true,
      symbol: 'none' // 隐藏小圆圈标记
    },
    {
      name: '优秀线',
      data: [90, 90, 90, 90, 90, 90, 90],
      type: 'line',
      smooth: true,
      symbol: 'none' // 隐藏小圆圈标记
    },
    {
      name: '良好线',
      data: [80, 80, 80, 80, 80, 80, 80],
      type: 'line',
      smooth: true,
      symbol: 'none' // 隐藏小圆圈标记
    },
    {
      name: '中等线',
      data: [60, 60, 60, 60, 60, 60, 60],
      type: 'line',
      smooth: true,
      symbol: 'none' // 隐藏小圆圈标记
    }
  ]
}

/* function getLast7Days () {
  const days = []
  const today = new Date()

  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(today.getDate() - i)
    // 格式化日期为所需的字符串格式，例如 'YYYY-MM-DD'
    const formattedDate = date.toISOString().split('T')[0]
    days.push(formattedDate)
  }

  return days
} */

/* function updateXAxisData (option) {
  console.log(333)
  console.log(option)
  const last7Days = getLast7Days()
  option.xAxis.data = last7Days
} */

export default {
  name: 'HomePage',

  data () {
    return {
      barChart: null, // 保存柱状图实例
      pieChart: null, // 保存饼状图实例
      lineChart: null, // 保存折线图实例
      dateValue: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      },
      userInfo: null
    }
  },
  mounted () {
    // 初始化柱状图
    const barDom = document.getElementById('bar')
    this.barChart = echarts.init(barDom)
    // 获取评分人数数据
    const scoreCountsData = getFocusScoreCountsData()
    // 将评分人数数据设置为柱状图的 data
    barOption.series[0].data = [
      scoreCountsData.excellent,
      scoreCountsData.good,
      scoreCountsData.average,
      scoreCountsData.poor
    ]
    // 设置柱状图选项
    // this.barChart.setOption(barOption)

    // 初始化饼状图
    const pieDom = document.getElementById('pie')
    this.pieChart = echarts.init(pieDom)
    // 获取评分数据
    const scoresData = getFocusScoresData()
    // 将评分数据转换为饼状图的数据格式
    const pieData = [
      {value: scoresData.excellent, name: '优秀'},
      {value: scoresData.good, name: '良好'},
      {value: scoresData.average, name: '中等'},
      {value: scoresData.poor, name: '较差'}
    ]
    // 设置饼状图数据
    pieOption.series[0].data = pieData
    // 设置饼状图选项
    // this.pieChart.setOption(pieOption)

    // 初始化折线图
    const lineDom = document.getElementById('line')
    this.lineChart = echarts.init(lineDom)
    this.refreshData()
    // updateXAxisData(lineOption)
    // this.lineChart.setOption(lineOption)
  },

  methods: {
    changeData () {
      // 更新柱状图数据
      barOption.series[0].data = [10, 10, 10, 10]
      this.barChart.setOption(barOption)

      // 更新饼状图数据
      const pieData = [
        {value: 10, name: '优秀'},
        {value: 10, name: '良好'},
        {value: 10, name: '中等'},
        {value: 10, name: '较差'}
      ]
      pieOption.series[0].data = pieData
      this.pieChart.setOption(pieOption)
    },
    changeClassLineOption: function () {
      getClassLineOption({
        schoolId: this.userInfo.schoolId,
        classId: this.userInfo.classId,
        dateBegin: this.dateValue[0],
        dateEnd: this.dateValue[1]
      }).then(resp => {
        if (resp.responseCode === 20009) {
          var option = JSON.parse(resp.data)
          lineOption.series[0].data = option.series[0].data
          lineOption.series[1].data = option.series[1].data
          lineOption.series[2].data = option.series[2].data
          lineOption.series[3].data = option.series[3].data
          lineOption.xAxis.data = option.xAxis.data
          this.lineChart.setOption(lineOption)
        }
      })
    },
    changeClassBarAndPieOption: function () {
      getBarAndPieOption({
        schoolId: this.userInfo.schoolId,
        classId: this.userInfo.classId,
        dateBegin: this.dateValue[0],
        dateEnd: this.dateValue[1]
      }).then(resp => {
        if (resp.responseCode === 20010) {
          var option = JSON.parse(resp.data)
          barOption.series[0].data = option.barOptionData
          pieOption.series[0].data = option.pieOptionData
          this.pieChart.setOption(pieOption)
          this.barChart.setOption(barOption)
        }
      })
    },
    refreshData: function () {
      this.changeClassLineOption()
      this.changeClassBarAndPieOption()
    }
  },
  created () {
    const userInfoStr = sessionStorage.getItem('userInfo')
    this.userInfo = JSON.parse(userInfoStr)

    const dateBegin = new Date(new Date().setDate(new Date().getDate() - 7))
    const dateEnd = new Date()
    this.dateValue = [dateBegin, dateEnd]
  }
}

</script>

<style>
</style>
